<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<script>
	$(document).ready(function() {
        var categories = ['0-4', '5-9', '10-14', '15-19',
            '20-24', '25-29', '30-34', '35-39', '40-44',
            '45-49', '50-54', '55-59', '60-64', '65-69',
            '70-74', '75-79', '80-84', '85-89', '90-94',
            '95-99', '100 +'];
		
		//sheet 초기화
		var cfg = {
		    Chart : {
				Animation : true,
		        PlotBackgroundColor : "#FAFAFA",
				PlotBorderColor:"#A9AEB1",
		        PlotBorderWidth:0.5,
				BackgroundColor:{
					LinearGradient : [0,0,100,500],
					Stops : [
						[0, "#D7E1F3"],
						[1, "#FFFFFF"]
					]
				},
				BorderColor : "#84888B",
				
				Type : "bar",
		        Style : {
		            FontSize : "20px"
		        }		
		    },
			Credits : {
				Enabled:false
			},
			
			Colors : ["#7AAAEE","#F06F3E","#AAEE6A","#F0E150","#5DA0A9","#75738B"],
			
		    Legend : {
		    	enabled: false
		    },
		    
		    XAxis : [{
		    	categories: categories,
		    	reversed: false,
                labels: {
                    step: 1
                }
		    },{
		    	categories: categories,
		    	opposite: true,
                reversed: false,
                linkedTo: 0,
                labels: {
                    step: 1
                }
		    }],
			
		    YAxis : {
		        Title : {
		            Text : ""
		        },
		        labels: {
                    formatter: function(){
                        return (Math.abs(this.value) / 1000000) + 'M';
                    }
                },
		   		min: -4000000,
            	max: 4000000
		    },
		    
		    plotOptions: {
                series: {
                    stacking: 'normal'
                }
            },
            
            tooltip: {
                formatter: function(){
                    return '<b>'+ this.series.name +', age '+ this.point.category +'</b><br/>'
                    + '값: '+ Math.abs(this.point.y);
                }
            },
		}
		
		myChart.SetOptions(cfg);
		
		myChart.DoSearch("../data/chartdata_bar_negative_stack.json");
		myChart.Draw();
	});
	
</script>
<title>Bar with negative stack 예제</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/chartNavi.jsp" %>	
	<div id="title">Bar with negative stack 예제</div>
	<div id="desc">
		bar 타입으로 설정 후, 조회된 데이터를 차트에 좌우로 나눠서 표현한다.
	</div>

	<div id="functionArea">
		chart: {<br>
	    &nbsp;&nbsp;&nbsp;&nbsp;Type : "bar",<br>
	    }<br>
	    <br>
	    XAxis : [{<br>
		&nbsp;&nbsp;&nbsp;&nbsp;categories: categories,<br>
		&nbsp;&nbsp;&nbsp;&nbsp;reversed: false,<br>
		},{<br>
		&nbsp;&nbsp;&nbsp;&nbsp;categories: categories,<br>
		&nbsp;&nbsp;&nbsp;&nbsp;<font color="#FF000">opposite: true</font>,&nbsp;&nbsp;&nbsp;&nbsp;// Y축 범위값을 마주보게하여 양끝에 그린다. <br>
        &nbsp;&nbsp;&nbsp;&nbsp;reversed: false,<br>
        &nbsp;&nbsp;&nbsp;&nbsp;<font color="#FF000">linkedTo: 0</font>,&nbsp;&nbsp;&nbsp;&nbsp;// 우측의 Y축 값을 표시한다.<br>
		}]
	</div>
	
	<div id="viewArea">
		<script type="text/javascript">
			createIBChart("myChart", "1000px", "300px");
		</script>
	</div>
</div>
</body>
</html>